<template>
  <div v-transfer-dom>
    <popup v-model="showAgreement" class="agreement-popup" is-transparent>
      <div class="agreement-wrap">
        <div class="aw-title">联通协议</div>
        <div class="aw-txt">
          <p>1、为了使您能够参加乙方的“金榜题名大礼包”活动,您同意授权乙方查询您的平台注册个人信息，并将您的姓名等相关信息发送给乙方判断您是否符合办理条件；如您成功办理了“金榜题名大礼包”活动，您同意将您的姓名、身份证号、联系号码、邮寄地址等个人信息、履约信息及乙方掌握的与您所选“金榜题名大礼包”活动有关的其他信息发送给乙方公司用于履约监督。您承诺对此将不会向乙方及/或乙方的关联方以任何形式提出任何的权利主张，也不会追究乙方及/或乙方的关联方的任何责任。</p>
          <p>2、本协议一经订立，即对甲乙双方产生法律约束力。</p>
          <p>3、因本协议的签订和履行发生的一切争议，如双方协商不成的，任何一方有权将争议提交乙方住所地有管辖权的人民法院诉讼解决。</p>
        </div>
        <!-- <div class="aw-agreement">我已阅读并同意该协议</div> -->
        <div class="magic-check aw-agreement" @click.once="checkAgreement()">
          <input type="checkbox" class="magic-checkbox" id="1" >
          <label for="1">我已阅读并同意该协议</label>
        </div>
        <div class="btn-next-group">
          <a href="javascrip:;" class="btn-next" @click="onAgreementClick()">确定</a>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import Utils from '@/common/utils.js'
import { TransferDom, Popup } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    Popup
  },
  data () {
    return {
      showAgreement: false,
      agreementChecked: false
    }
  },
  methods: {
    // 关闭协议层
    closeAgreement () {
      this.showAgreement = false
    },
    // 打开协议层
    openAgreement () {
      this.showAgreement = true
    },
    checkAgreement () {
      this.agreementChecked = this.agreementChecked ? 0 : 1
    },
    onAgreementClick () {
      if (!this.agreementChecked) {
        this.$vux.toast.show({
          text: '请同意协议',
          type: 'text',
          width: '80%'
        })
        return
      }
      Utils.session('userType', '3')
      this.$router.push({name: 'mineUserInfo', query: {n: 'goodsPay', lg: true, t: 'reg'}})
    }
  }
}
</script>

